import React, { lazy, Suspense } from "react"

// router config
import { createBrowserRouter } from "react-router-dom"
import Layout from "@/pages/Layout/"
import Login from "@/pages/Login/"

// 引入AuthRoute组件，用于判断是否登录
import { AuthRoute } from "@/components/AuthRoute"

// 修改为由React提供的lazy函数进行动态导入
const Home = lazy(() => import('@/pages/Home/'))
const Publish = lazy(() => import('@/pages/Publish/'))
const Article = lazy(() => import('@/pages/Article/'))
// 2. 定义路由，使用React内置的Suspense组件包裹路由中element选项对应的组件
const router = createBrowserRouter([
	{
		path: '/',
		element: <AuthRoute><Layout /></AuthRoute>,
		children: [
			{
				index: true,
				element: <Suspense fallback={'加载中'}><Home /></Suspense>
			},
			{
				path: 'article',
				element: <Suspense fallback={'加载中'}><Article /></Suspense>
			},
			{
				path: 'publish',
				element: <Suspense fallback={'加载中'}><Publish /></Suspense>
			}
		]
	},
	{
		path: '/login',
		element: <Login />,
	}
])

export default router